<template>
  <div class="goods-detail">
    <myheader biaoti="商品详情页"></myheader>
    <!-- <mt-swipe class="swiperbox"> -->
      <swiper :list="goodslunbo" auto height='300px' class="swiperbox" dots-position="center">
        <!-- <img src="item.img" alt="图片详情" height="300px"> -->
      </swiper>
    <!-- </mt-swipe> -->
    <div>
      <h4 class="goods-title">{{goodsinof.title}}</h4>
      <p class="goods-price"><span class="market-price">￥{{goodsinof.market_price}}</span><span class="sell-price">￥{{goodsinof.sell_price}}</span></p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品编号：{{goodsinof.goods_no}}</p>
      <p>库存：{{goodsinof.stock_quantity}}</p>
      <p>上架时间：{{goodsinof.add_time}}</p>
    </div>
    <!-- <mt-button type="primary">图文介绍</mt-button> -->
    <!-- <mt-button type="danger">商品评论</mt-button> -->
    <!-- 两个按钮 -->
      <x-button :gradients="['#1D62F0', '#19D5FD']">图文介绍</x-button>
      <x-button :gradients="['#FF2719', '#FF61AD']">商品评论</x-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{totalNum}}</span>
      </div>
      <div class="goods-footer-item add" @click="commodity"><span>加入购物车</span></div>
      <div class="goods-footer-item buy"><span>立即购买</span></div>
    </div>
  </div>
</template>
<script>
import { Swiper, XButton } from 'vux'
import { getLunbotu, getGoodinfo, getShopInfo } from '@/api'
import myheader from '@/components/myheader'
export default {
  components: {
    Swiper,
    XButton,
    myheader
  },
  data () {
    return {
      id: this.$route.params.id,
      goodslunbo: [], // 轮播图数据
      goodsinof: {}, // 数据详情
      cartListPage: [] // 2.0空数组用来获取本地数据 购物车的num值de变化
    }
  },
  created () {
    this.lunbo()
    this.goodsdetails()
    // this.commodity()
    // 2.1页面已加载就获取本地数据
    this.cartListPage = JSON.parse(localStorage.getItem('cartList') || '[]')
  },
  // 创建一个获取总数量的计算属性
  computed: {
    totalNum () {
      let tota = 0
      // 循坏页面数组，将所有的项num加起来
      this.cartListPage.map(item => {
        tota += item.num
      })
      return tota
    }
  },
  methods: {
    lunbo () {
      // 轮播图
      getLunbotu(this.id)
        .then(res => {
          // console.log(res)
          // this.goodslunbo = res.message
          // console.log(res.message[0].src)
          // 定义一个新的数组，用来接收对象
          let tempArr = []
          // 通过map循环item的项，index代表索引
          res.message.map((item, index) => {
            // console.log(index)
            // 因为是对象，所以定义一个新的空对象
            let temp = { url: '', img: '', title: '' }
            temp.url = 'javascript:'
            temp.img = item.src
            temp.title = ''
            tempArr.push(temp)
          })
          this.goodslunbo = tempArr
          // console.log(this.goodslunbo)
        })
    },
    // 初始化商品信息
    goodsdetails () {
      getGoodinfo(this.id)
        .then(res => {
          // console.log(res)
          this.goodsinof = res.message[0]
        })
    },
    // 1.1添加购物车
    commodity () {
      // 1.2 先判断本地有没有当前添加的那个商品，如果没有，就直接将该商品信息（id,选中状态，图片，标题，价格，数量）添加至本地；如果有，就将该商品的数量加1
      let cartList = JSON.parse(localStorage.getItem('cartList') || '[]')
      // 1.2.1 调用下面这个方法的目的是要去获取(id, 图片，标题，价格)，拼接一个商品对象的信息出来，用于保存到本地
      getShopInfo(this.id)
        .then(res => {
          console.log(res)
          // 1.2.2 用临时对象存储请求回来的商品信息
          let tempObj = {
            id: res.message[0].id,
            selectState: true, // 选中状态默认为true
            img: res.message[0].thumb_path,
            title: res.message[0].title,
            price: res.message[0].sell_price,
            num: 1
          }
          // 1.2.3 判断本地取回的数组中，是否存在上面id的那个商品。 利用findIndex来找，看是否存在那个id项对应的索引，如果存在，就返回该索引；如果不存在就返回-1
          let idx = cartList.findIndex(item => item.id === parseInt(this.id))
          if (idx === -1) {
            // 不存在，就直接push进数组中
            cartList.push(tempObj)
          } else {
            // 存在，将对应的项加一
            cartList[idx].num += 1
          }
          // 1.3将新的数据存入本地
          localStorage.setItem('cartList', JSON.stringify(cartList))
          // 将页面的数据与本地的数据保持一致，用于num值得更新
          this.cartListPage = cartList
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-detail {
  margin-bottom: 50px;
  // padding: 0 10px;
}
.swiperbox {
  // margin-top: 50px;
  img {
    width: 100%;
  }
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.goods-price {
  font-size: 14px;
  .market-price {
    text-decoration: line-through;
  }
  .sell-price {
    color: #e4393c;
  }
}

.goods-info {
  font-size: 14px;
   .goods-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}

.goods-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  background-color: #fff;
  .goods-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact, .cart {
    width: 40%;
    font-size: 12px;
    position: relative;
  }
  .badge {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #e4393c;
    text-align: center;
    line-height: 14px;
    color: white;
  }
  .add, .buy {
    width: 60%;
    color: white;
    &>span {
      font-size: 20px;
    }
  }
  .add {
    background-color: #ff9600;
  }
  .buy {
    background-color: #e4393c;
  }
}
</style>
